<template>
  <view class="app-message">
      <Navbar :isBack="false" title="消息" background="#F5F6F7"></Navbar>
      <view class="show">
          <view class="item" @click="handleNotifyGoto('/pages/message/infrom',notify.infrom)">
              <img src="/static/message/icon1.png" alt="">
              <view class="title">活动通知</view>
              <view class="tip" v-if="notify.infrom.unreadCount">{{notify.infrom.unreadCount}}</view>
          </view>
          <view class="item" @click="handleNotifyGoto('/pages/message/system',notify.system)">
              <img src="/static/message/icon2.png" alt="">
              <view class="title">系统通知</view>
              <view class="tip" v-if="notify.system.unreadCount">{{notify.system.unreadCount}}</view>
          </view>
          <view class="item" @click="handleNotifyGoto('/pages/message/relation',notify.relation)">
              <img src="/static/message/icon3.png" alt="">
              <view class="title">与我相关</view>
              <view class="tip" v-if="notify.relation.unreadCount">{{notify.relation.unreadCount}}</view>
          </view>
      </view>
      <view class="list">
          <view class="item" v-for="(item,index) in conversationList" :key="index" @click="handleRoom(item)"
            v-if="item.userProfile.userID!='2' && item.userProfile.userID!='3' & item.userProfile.userID!='4'">
              <view class="img">
                  <image :src="item.userProfile.avatar"  mode="aspectFill"></image>
              </view>
              <view class="cont">
                  <view class="cell">
                    <view class="name">{{item.userProfile.nick}}</view>
                    <view class="time">{{$getDateDiff(item.lastMessage.lastTime)}}</view>
                  </view>
                  <view class="cell">
                    <view class="text" v-html="item.lastMessage.messageForShow"></view>
                    <view class="tip" v-if="item.unreadCount">{{item.unreadCount}}</view>
                  </view>
              </view>
          </view>
      </view>
  </view>
</template>
<script>
import {mapState} from "vuex";
export default {
  data() {
    return {
      list:[]
    }
  },
  created(){
    // this.login() 
  },
  computed: {
    ...mapState({
      notifyNum:state=>state.notifyNum,
      notify:state=>state.notify,
      isSDKReady: state => state.isSDKReady,
      conversationList: state => state.conversationList,
    })
  },
  methods: {
    setTabbar(count){
      if(!count){
        uni.removeTabBarBadge({
          index: 3, // 底部菜单栏的索引（从0开始）
        });
      }else{
        uni.setTabBarBadge({
          index: 3, // 底部菜单栏的索引（从0开始）
          text:String(count), // 要显示的文本（必须是字符串类型）
        });
      }
      this.$store.commit('updateNotifyNum',count)
    },
    handleNotifyGoto(url,item){
      const count=this.notifyNum - item.unreadCount
      this.setTabbar(count)
      this.$store.commit('updateConversationActive', item)
      this.$gotoUrl(url)
   
    },
    handleRoom(item){
      const count=this.notifyNum - item.unreadCount
      this.setTabbar(count)
      this.$store.commit('updateConversationActive', item)
      this.$gotoUrl('/pages/message/chat')
    },
   
    
   
  },
}
</script>
<style lang="scss" scoped>
.app-message{
  background-color: #F5F6F7;;
}
  .show{
    display: flex;
    justify-content: center;
    padding: 40rpx 0;
    .item{
      text-align: center;
      font-size: 28rpx;
      position: relative;
      img{
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 10rpx;
      }
      .tip{
        height: 32rpx;
        min-width: 19rpx;
        text-align: center;
        padding: 0 8rpx;
        background: #F33C23;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        display: inline-block;
        color: #fff;
        font-size: 24rpx;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .item+.item{
      margin-left: 96rpx;
    }
  }
  .list{
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    background-color: #fff;
    padding: 20rpx 0;
    .item{
      display: flex;
      align-items: center;
      padding: 26rpx 30rpx;
      &>.img{
        margin-right: 8rpx;
        image{
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
        }
      }
      &>.cont{
        flex: 1;
        .cell{
          display: flex;
          justify-content: space-between;
          .name{
            font-weight: 500;
            font-size: 28rpx;
            flex: 1;
          }
          .time{
            font-size: 20rpx;
            color: #909399;
          }
          .text{
            color: #909399;
          }
          .tip{
            height: 32rpx;
            min-width: 19rpx;
            padding: 0 8rpx;
            background: #F33C23;
            text-align: center;
            border-radius: 28rpx 28rpx 28rpx 28rpx;
            display: inline-block;
            color: #fff;
            font-size: 24rpx;
          }
        }
        .cell+.cell{
          margin-top: 10rpx;
        }
      }
    }
  }
</style>